<script>
// 拖拽布局
import * as types from '@/store/types';
import * as utils from '@/utils/helps';
import WorkSpaceQuery from '../../mixins/WorkspaceQuery';
import BasicChart from './gridlayoutitem/BasicChart';
import MapItem from './gridlayoutitem/MapItem';
import ExternalApp from './gridlayoutitem/ExternalApp';
import TextItem from './gridlayoutitem/TextItem';
import ImgItem from './gridlayoutitem/ImgItem';
import FrameItem from './gridlayoutitem/FrameItem';
import FormItem from './gridlayoutitem/FormItem';
import TemplateApp from './gridlayoutitem/TemplateApp';
import TemplateMap from './gridlayoutitem/TemplateMap';

export default {
  name: 'GridLayouts',
  components: {
    BasicChart,
    MapItem,
    ExternalApp,
    TextItem,
    ImgItem,
    FrameItem,
    FormItem,
    TemplateApp,
    TemplateMap,
  },
  mixins: [WorkSpaceQuery],
  props: {
    layoutList: {
      type: Array,
      default: () => [],
    },
    isDraggable: {
      type: Boolean,
      default: true,
    },
    isResizable: {
      type: Boolean,
      default: true,
    },
    isShowTools: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      selectedItem: false,
      itemList: {},
      isRenderMap: true,
    };
  },
  methods: {
    throttle(fun, delay) {
      let last = 0;
      return function(...args) {
        let cur = new Date();
        if (cur - last > delay) {
          fun.apply(this, args);
          last = cur;
        }
      };
    },
    // 找到对应i值相等的组件,组合新的配置项
    getItem(item) {
      let itemkey = ['x', 'y', 'h', 'w'];
      let cardItem;
      this.layoutList.forEach(layout => {
        cardItem = utils.deepCopy(layout);
        let itemData = item.filter(key => key.i === layout.appearance.position.i);
        itemkey.forEach(key => {
          cardItem.appearance.position[key] = itemData[0][key];
        });
        // 移除外部的组件位置信息
        Object.keys(cardItem.appearance.position).forEach(exkey => {
          delete cardItem[exkey];
        });
        this.itemList[layout.chartId] = cardItem;
      });
    },
    // 是不是新的工作区
    addNewChart() {
      this.$emit('open-newchart', true);
    },
    // 图表自适应
    resizeEvent() {
      window.dispatchEvent(new Event('resize'));
    },
    /* 选中一个组件，通过状态管理储存数据 */
    selectGridItem(item) {
      this.isRenderMap = false;
      this.selectedItem = item.i;
      this.$store.commit(types.UPDATA_APPLY_CURRENTID, item.chartId);
    },
    //缩放/拖拽结束触发
    onChangeStop(item) {
      this.setAppSave();
      this.getItem(item);
      setTimeout(() => {
        this.$store.commit(types.UPDATE_CHART_CONFIG, { data: this.itemList });
      }, 0);
    },
    // 更新应用的保存状态
    setAppSave() {
      this.$store.commit(types.UPDATE_APP_STATE);
    },
  },
};
</script>
<template>
  <div class="datav-gridlayouts">
    <div
      v-if="layoutList.length===0 && isShowTools"
      class="empty-dash-add"
      @click="addNewChart"
    >
      <span>
        <i class="a" />
        <i class="b" />
      </span>
      <div class="empty-dash-add-tip">添加图表</div>
    </div>
    <GridLayout
      :layout="layoutList"
      :cols="12"
      :row-height="30"
      :is-draggable="isDraggable"
      :is-resizable="isResizable"
      :margin="[8, 8]"
      :on-resize-stop="onChangeStop"
      :on-resize="resizeEvent"
      :on-drag-stop="onChangeStop"
      :on-layout-change="resizeEvent"
      draggable-handle=".item-head"
    >
      <div
        v-for="item in layoutList"
        :key="item.appearance.position.i"
        class="layout-item"
        @click.capture="throttle(selectGridItem(item),30)"
      >
        <div
          v-if="isShowTools"
          class="item-head">
          <span></span>
        </div>
        <!--  <div
          v-else
          class="item-none">
          <span></span>
        </div> -->
        <component
          :is="item.appearance.parentType"
          :type="item.appearance.type"
          :chart-id="item.chartId"
          :map-id="item.mapId"
          :item-config="item.options"
          :is-render-map="isRenderMap"></component>
      </div>
    </GridLayout>
  </div>
</template>


<style lang="less" scoped>
.datav-gridlayouts {
  width: 100%;
  height: 100%;
}

.k-grid-layout {
  /deep/ .k-grid-item {
    background-color: #e4e5e7;
  }
  /deep/ .layout-item .layout-toolbar {
    display: none !important;
  }

  /deep/ .layout-item:hover .layout-toolbar {
    display: block !important;
  }

  /deep/ .layout-item {
    position: reletive;
  }

  .item-head,
  .item-none {
    position: absolute;
    width: 100%;
    height: 20px;
    font-size: 12px;
    z-index: 899;
    background-color: rgba(0, 0, 0, 0);

    > span {
      padding-left: 10px;
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
      font-weight: 700;
      color: rgba(10, 18, 32, 0.87);
    }
  }
  .item-head:hover {
    cursor: move;
  }
}

.empty-dash-add {
  margin: 8px 0 0 8px;
  text-align: center;
  width: 287px;
  height: 230px;
  background-color: #fff;
  cursor: pointer;

  span {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 67px auto 16px;
    cursor: pointer;
  }

  .a {
    margin-left: 31px;
    width: 2px;
    height: 100%;
  }

  .b {
    margin-top: -31px;
    width: 100%;
    height: 2px;
  }

  .a,
  .b {
    display: block;
    background-color: #a3abb0;
  }

  .empty-dash-add-tip {
    color: rgba(10, 18, 32, 0.46);
  }
}

.empty-dash-add:hover {
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
</style>
